<template>
  <div>
    <button @click="showfun">点击show切换显示和隐藏</button>
    <button @click="iffun">点击if切换显示和隐藏</button>
    <br />
    <br />
    <div
      style="width: 200px; height: 200px; border: 1px solid red"
      v-show="show"
    >
      我是show显示隐藏的盒子
    </div>
    <div
      style="width: 200px; height: 200px; border: 1px solid green"
      v-if="iff"
    >
      我是if显示隐藏的盒子
    </div>
    <br />
    <div class="box">
      <h1 v-if="age >= 60">60岁以上, 广场舞</h1>
      <h1 v-else-if="age >= 30">30岁以上, 搓麻将</h1>
      <h1 v-else-if="age >= 20">20岁以上, 蹦迪</h1>
      <h1 v-else>20岁以下, 唱跳rap篮球</h1>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      iff: true,
      age: 18,
    }
  },
  methods: {
    showfun() {
      this.show = !this.show
    },
    iffun() {
      this.iff = !this.iff
    },
  },
}
</script>
<style>
.box {
  width: 400px;
  height: 100px;
  border: 1px lawngreen solid;
}
</style>

<!-- 总结 -->
<!-- V-show切换盒子的显示或者隐藏的时候,通过添加css属性 display:none实现的 -->
<!-- v-if切换盒子的显示或者隐藏的时候，直接删除或者新增当前dom节点 -->
<!-- 一、初始渲染的时候，v-if和v-show的区别 -->
<!-- V-if:如果标识为false，不会创建当前dom节点 -->
<!-- V-show:如果标识为false，会创建节点，但是会通过css属性隐藏盒子 -->
<!-- 二、初始的渲染v-if和v-show谁的性能消耗比较大 -->
<!-- V-show的性能消耗比较大 -->
<!-- 三、频繁切换的时候，谁的性能消耗比较大 -->
<!-- V-if的消耗大，一直需要创建删除dom节点 -->
<!-- V-show消耗比较小·因为只需要通过css控制显示或者隐藏就可以了 -->
